import './app.css'

const name = "abc"
const getAge = () => {
  return 18
}
const flag = true
const songs = [
  {
    id: 1,
    name: "痴心绝对"
  },
  {
    id: 2,
    name: "像我这样的人"
  },
  {
    id: 3,
    name: "南山南"
  }
]
const getHtag = (type) => {
  if (type === 1) {
    return <h1>this is h1</h1>
  }
  if (type === 2) {
    return <h2>this is h2</h2>
  }
  if (type === 3) {
    return <h3>this is h3</h3>
  }
}
const inlineStyle = {
  color: "red",
  fontSize: "30px"
}
const activeFlag = true

function App() {
  return (
    <div className="App">

      <div>
        <h2>注意</h2>
        <p>有且只有一个根节点</p>
        <p>模板存在换行时建议使用（）包裹</p>
      </div>

      <div>
        <h2>表达式的使用</h2>
        <p>大括号中支持填表达式（数据、函数执行等）</p>
        <p>if语句 变量声明等语句则不支持</p>
        {name}
        {getAge()}
        {flag ? 'good' : 'bad'}
      </div>

      <div>
        <h2>列表渲染</h2>
        <p>map中return的就是渲染结果，key尽在虚拟dom中使用到，不会在真实dom中渲染出来</p>
        <ul>
          {songs.map(v => {
            return <li key={v.id}>{v.name}</li>
          })}
        </ul>
      </div>

      <div>
        <h2>条件渲染</h2>
        <p>三元表达式</p>
        {flag ? (
          <div>
            <span>this is span</span>
          </div>) : null}
        <p>逻辑与运算</p>
        {flag && (
          <div>
            <span>this is span</span>
          </div>)}
      </div>

      <div>
        <h2>使用函数控制分支逻辑</h2>
        {getHtag(1)}
        {getHtag(2)}
        {getHtag(3)}
      </div>

      <div>
        <h2>样式控制</h2>
        <div style={{ color: "red", fontSize: "30px" }}>行内样式red</div>
        <div style={inlineStyle}>行内样式red</div>
        <div className="active">类名样式</div>
        <div className={activeFlag ? 'active' : ''}>动态类名样式</div>
      </div>

    </div>
  );
}

export default App;
